import React from "react"
// 受控的表单组件控制方式

// 受控: input的value状态完全由react自身的状态控制

// 控制流程: 
// 1. 给input value绑定react的状态 
// 2. 监听input的onChange事件在事件回调里拿到输入的最新值反向重新交给state

class InputComponent extends React.Component {
  // 准备一个react自身的状态
  state = {
    message: 'this is message'
  }

  onChange = (e) => {
    // e.target.value 用户在输入框中输入的最新的值
    // 调用 setState方法 把用户输入的最新的值 重新交给 message
    this.setState({
      message: e.target.value
    })
  }

  render () {
    return (
      <div>
        <input
          type="text"
          value={this.state.message}
          onChange={this.onChange} />
      </div>
    )
  }
}

function App () {
  return <div><InputComponent /></div>
}


export default App